<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Jane shopping</title>
		<link rel="stylesheet" href="styles/main.css" type="text/css" />
		<link rel="stylesheet" href="styles/index.css" type="text/css" />
		<link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css"
			id="cssfile" />
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript">
		$(function(){
			/*
			 * 最新动态  ---------------------------------------------------
			 */	
			//滚动条
			var time=setInterval(show,800);
			$(".scrollNews").hover(function(){
				clearInterval(time);
			},function(){
				time = setInterval(show, 800);
			});

			/*
			 * 产品分类   --------------------------------------------------
			 */
			 //点击图片隐藏产品分类区域
			 $(".module_up_down").click(function(){
				$(this).siblings("ul").slideToggle(800);
				$(this).siblings("div").slideToggle(800);
			 });
			 //吧所有的子项隐藏
			 $("li.m-expanded ul").hide();
			 $("li.m-expanded").addClass("m-collapsed");
			 //点击一级菜单，展开子项
			 $("ul li span").click(function(){
				//alert("sdffa");  .siblings().hide()
				//$(this).next().toggle(600);
				if($(this).next().is(":hidden")){
					$(this).next("ul").show(500);
					$(this).parent().removeClass("m-collapsed").addClass("m-expanded");
				}else{
					$(this).next().hide(500);
					$(this).parent().removeClass("m-expanded").addClass("m-collapsed");
				}
			 });

		 
			 /*
			  * 首页打广告   ------------------------------------------------
			  */

			  var n=0;
			 $(".num li").eq(0).addClass("on").siblings().removeClass("on");
			 $("div.content_right div.ad ul.num li").mouseover(function(){
				var index=$(this).index();
				 n=index;
				//给每个选中的追加样式
				 $(this).addClass("on").siblings().removeClass("on");
				 //获取到当前下标对应的图片下标
				 showImg($(this),index);
			 });
			var timer="";
			$(".ad").hover(function(){
			  clearInterval(timer);
			},function(){
				timer=setInterval(function(){
				showImg($(".num li"),n);	
				 n++;
				if(n==5){
				 n=0;
				}
			},2000);
			}).trigger("mouseleave");

		 
			/*
			 * 新品上市    --------------------------------------------
			 */
			var count = $(".prolist_content ul li").length;//图片的个数
			var num = 4;
			var pageCount = Math.ceil(count / 4);//得到总页数     
			var page = 1; //当前页
			var divWith=$(".content_right").width();//每次显示的宽度
			$(".module_left_right img.goRight").click(function(){
				if (page < pageCount) {
					$(".prolist_content").animate({
						"left" : "-="+divWith
					}, 800);
					page++;
				} else {
					$(".prolist_content").animate({
						"left" : "0"
					}, 10);
					page = 1;
				}
			});
	 	
			$(".module_left_right img.goLeft").click(function() {
				if (page > 1) {
					$(".prolist_content").animate({
						"left" : "+="+divWith
					}, 800);
					page--;
				}else{
				$(".prolist_content").animate({
						"left" : "-"+divWith*(pageCount-1)
					}, 10);
					page=pageCount;
				}
			});
		
			/*
			 * 鼠标进入显示细节图片   -------------------------------------------------
			 */
			 $(".prolist_content ul li img").each(function(){
				 var $pos=$(this).position();
				 var left=$pos.left;
				 var top=$pos.top;
				 var imgw=$(this).width();
				 var imgh=$(this).height();
				 var $span="<span style='z-index:0;position:absolute;top:"+top+"px;left:"+left+"px;width:"+imgw+"px;height:"+imgh+"px'></span>";
				 $(this).after($span);
	     		 });

			$(".prolist_content ul li a").hover(function(){
				$(this).children("span").addClass("imageOver");
			},function(){
				$(this).children("span").removeClass("imageOver");
			});
		
		
			/*
			 * 首页换肤
			 */
			var myCssName = $.cookie("MyCssSkin");
			if (myCssName != undefined) {
				switchCss(myCssName);
			}

			$("#skin li").click(function() {
				var cssName = $(this).attr("id");
				switchCss(cssName);
			});
		
		
		});
	
		function switchCss(cssName) {
			//alert(cssName);
			$("#"+cssName).addClass("selected").siblings().removeClass("selected");
			$("#cssfile").attr("href", "styles/skin/" + cssName + ".css");

			$.cookie("MyCssSkin", cssName, {
				path : '/',
				expires : 10
			});
		}

	
		function showImg($ts,index){
			$(".num li").eq(index).addClass("on").siblings().removeClass("on");
				$ts.parent().siblings("ul.slider").animate({
					top : "-" + index * 150
				}, 800);
		}
	
		function show(){
			$(".scrollNews ul li:first").appendTo($(".scrollNews ul"));
		}

</script>
	</head>
	<body>
		<div align="left">
			<br />
			<!--头部开始-->
		</div>
		<div id="header">
			<a id="logo" href="#">Jane Shopping</a>
			<ul id="skin">
				<li id="skin_0" title="蓝色" class="selected">
					蓝色
				</li>
				<li id="skin_1" title="紫色">
					紫色
				</li>
				<li id="skin_2" title="红色">
					红色
				</li>
				<li id="skin_3" title="天蓝色">
					天蓝色
				</li>
				<li id="skin_4" title="橙色">
					橙色
				</li>
				<li id="skin_5" title="淡绿色">
					淡绿色
				</li>
			</ul>

		</div>
		<!--头部结束-->
		
		
		<!--导航开始-->
		<div id="navigation">
			<ul>
				<li>
					<a href="#">首 页</a>
				</li>
				<li>
					<a href="#">衬 衫</a>
					<ul>
						<li>
							<a href="#">短袖衬衫</a>
						</li>
						<li>
							<a href="#">长袖衬衫</a>
						</li>
						<li>
							<a href="#">无袖衬衫</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">卫 衣</a>
					<ul>
						<li>
							<a href="#">开襟卫衣</a>
						</li>
						<li>
							<a href="#">套头卫衣</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">裤 子</a>
					<ul>
						<li>
							<a href="#">休闲裤</a>
						</li>
						<li>
							<a href="#">卡其裤</a>
						</li>
						<li>
							<a href="#">牛仔裤</a>
						</li>
						<li>
							<a href="#">短裤</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">联系我们</a>
				</li>
			</ul>
		</div>
		<!--导航结束-->
		<!--主体开始-->
		<div id="content">
			<div class="content_left">
				<div class="global_module news">
					<h3>
						最新动态
					</h3>
					<div class="scrollNews">
						<ul>
							<li>
								<a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a>
							</li>
							<li>
								<a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a>
							</li>
						</ul>
					</div>
					<p class="module_up_down">
						<img src="images/down.gif" alt="" />
					</p>
				</div>



				<div class="global_module procatalog">
					<h3>
						产品分类
					</h3>
					<ul class="m-treeview">
						<li class="m-expanded">
							<span>衬衫</span>
							<ul>
								<li>
									<span>短袖衬衫</span>
								</li>
								<li>
									<span>长袖衬衫</span>
								</li>
							</ul>
						</li>
						<li class="m-expanded">
							<span>卫衣</span>
							<ul>
								<li>
									<span>开襟卫衣</span>
								</li>
								<li>
									<span>套头卫衣</span>
								</li>
							</ul>
						</li>
						<li class="m-expanded">
							<span>裤子</span>
							<ul>
								<li>
									<span>休闲裤</span>
								</li>
								<li>
									<span>免烫卡其裤</span>
								</li>
								<li>
									<span>牛仔裤</span>
								</li>
								<li>
									<span>短裤</span>
								</li>
							</ul>
						</li>
					</ul>
					<p class="module_up_down">
						<img src="images/down.gif" alt="" />
					</p>
				</div>
			</div>
			<div class="content_right">
				<div class="ad">
					<ul class="slider">
						<li>
							<img src="images/ads/1.gif" />
						</li>
						<li>
							<img src="images/ads/2.gif" />
						</li>
						<li>
							<img src="images/ads/3.gif" />
						</li>
						<li>
							<img src="images/ads/4.gif" />
						</li>
						<li>
							<img src="images/ads/5.gif" />
						</li>
					</ul>
					<ul class="num">
						<li>
							1
						</li>
						<li>
							2
						</li>
						<li>
							3
						</li>
						<li>
							4
						</li>
						<li>
							5
						</li>
					</ul>
				</div>


				<div class="global_module prolist">
					<h3>
						新款上市
					</h3>
					<div class="prolist_content">
						<ul>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" />
								</a><span>免烫高支棉衬衣1</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" />
								</a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" />
								</a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" />
								</a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" />
								</a><span>免烫高支棉衬衣2</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" />
								</a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" />
								</a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" />
								</a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" />
								</a><span>免烫高支棉衬衣3</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" />
								</a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" />
								</a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" />
								</a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
						</ul>
					</div>
					<p class="module_left_right">
						<img class="goLeft" src="images/left.gif" alt="" />
						<img class="goRight" src="images/right.gif" alt="" />
					</p>
				</div>
			</div>
		</div>
		<!--主体结束-->
	</body>
</html>
